<template>
  <div id="TsHobby">
    <h2>TsHobby</h2>
    <p @change="changeHandler">
      <input type="checkbox" value="css" :checked="value.includes('css')">CSS
      <input type="checkbox" value="js" :checked="value.includes('js')">JS
      <input type="checkbox" value="html" :checked="value.includes('html')">HTML
    </p>
  </div>
</template>
<script>
export default {
  props: ['value'],
  methods: {
    changeHandler(e) {
      const arr = [...document.querySelectorAll('#TsHobby input:checked')].map(el => el.value);
      this.$emit('input', arr);
    }
  }
};
</script>
<style></style>